<template>
  <section>
    <!--查询工具条-->
    <el-row :span="24" class="toolbar">
      <el-col :span="14"   style="padding-bottom: 0px;">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="searchEntity.name" placeholder="按名称查询"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchPage">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addItemDialog">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reload">刷新</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="10">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="float:right;padding:14px;">
          <el-breadcrumb-item :to="{path: '/Item_cat'}" @click.native="getAjax">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path: '/Item_cat'}" @click.native="findChildren(catId1,null,true)" v-if="catName1 != null">{{catName1}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="catName2 != null">{{catName2}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <!--查询工具条end-->
    <!--列表-->
    <el-table v-loading="loading"  element-loading-text="玩命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" @selection-change="selectItems" :data="data"  highlight-current-row  style="width: 100%;">
      <el-table-column type="selection" width="80">
      </el-table-column>
      <el-table-column type="index" width="120">
      </el-table-column>
      <el-table-column prop="id" label="ID"  sortable>
      </el-table-column>
      <el-table-column prop="name" label="名称"  sortable>
      </el-table-column>
      <el-table-column prop="parentId" label="上级分类"  sortable>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button size="small" v-bind:disabled="catName2 != null" @click="nextCats(scope.row.id,scope.row.name)">查看下级</el-button>
          <el-button size="small" @click="editItemDialog(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="dele(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表end-->
    <!--分页控件-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" v-bind:disabled="multiDelete" @click="deleteAll">批量删除</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="float:right;">
      </el-pagination>
    </el-col>
    <!--分页控件end-->
    <!--edit,add弹出层start-->
    <el-dialog :title="isNewItem ? '新增分类':'修改分类'" :visible.sync="dialogFormVisible">
      <el-form :model="entity">
        <el-form-item label="上级分类" :label-width="formLabelWidth">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-top: 14px">
            <el-breadcrumb-item >顶级</el-breadcrumb-item>
            <el-breadcrumb-item  v-if="catName1 != null">{{catName1}}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="catName2 != null">{{catName2}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="entity.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog">确 定</el-button>
      </div>
    </el-dialog>
    <!--edit,add弹出层end-->
  </section>
</template>

<script>
import service from '../../service/ItemCatService'

export default {
  name: 'Item_cat',
  data () {
    return {
      data: [],
      total: 0,
      currentPage: 1,
      currentSize: 10,
      currentParent: 0,
      catName1: null,
      catId1: null,
      catName2: null,
      dialogFormVisible: false,
      entity: {}, // 新增和删除的实体
      formLabelWidth: '120px',
      isNewItem: true,
      loading: true,
      searchEntity: {},
      selectIds: []
    }
  },
  mounted () {
    this.getAjax()
  },
  watch: {
  },
  computed: {
    multiDelete () {
      return this.selectIds.length === 0
    }
  },
  methods: {
    // 初始化列表
    getAjax: function () {
      this.currentParent = 0
      this.currentPage = 1
      this.currentSize = 10
      this.catName1 = null
      this.catId1 = null
      this.catName2 = null
      this.reload()
    },
    selectItems (selection) {
      this.selectIds = []
      for (let i = 0; i < selection.length; i++) {
        this.selectIds.push(selection[i].id)
      }
    },
    deleteAll () {
      let _this = this
      service.dele(this.selectIds)
        .then(function (response) {
          _this.reload()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    searchPage () {
      let _this = this
      service.search(1, this.currentSize, this.searchEntity)
        .then(function (response) {
          _this.data = response.data.rows
          _this.total = response.data.total
          _this.currentPage = 1
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    submitDialog () {
      if (this.isNewItem) {
        this.addItemSubmit()
      } else {
        this.editItemSubmit()
      }
      this.dialogFormVisible = false
    },
    addItemDialog () {
      this.entity = {}
      this.isNewItem = true
      this.dialogFormVisible = true
    },
    addItemSubmit () {
      this.entity.parentId = this.currentParent
      let _this = this
      service.add(this.entity)
        .then(function (response) {
          _this.reload()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    editItemDialog (id) {
      this.isNewItem = false
      this.dialogFormVisible = true
      let _this = this
      service.findOne(id)
        .then(function (response) {
          _this.entity = response.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    editItemSubmit () {
      let _this = this
      service.update(this.entity)
        .then(function (response) {
          _this.reload()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 重新加载
    reload () {
      let _this = this
      service.findByParentId(this.currentParent, this.currentPage, this.currentSize)
        .then(function (response) {
          _this.data = response.data.rows
          _this.total = response.data.total
          _this.loading = false
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 返回下一级分类列表
    nextCats (id, name) {
      if (!this.catId1) {
        this.findChildren(id, name, false)
      } else {
        this.findChildren(id, name, true)
      }
    },
    dele (id) {
      let ids = []
      ids.push(id)
      let _this = this
      service.dele(ids)
        .then(function (response) {
          _this.$message({
            message: '删除成功',
            type: 'success'
          })
          _this.reload()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    findChildren (id, name, isSecond) {
      let _this = this
      this.currentParent = id
      this.currentPage = 1
      console.log(this.currentPage, this.currentSize)
      service.findByParentId(this.currentParent, this.currentPage, this.currentSize)
        .then(function (response) {
          _this.data = response.data.rows
          _this.total = response.data.total
          if (!isSecond) {
            _this.catName1 = name
            _this.catId1 = id
          } else {
            _this.catName2 = name
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleSizeChange (val) {
      let _this = this
      service.findByParentId(this.currentParent, this.currentPage, val)
        .then(function (response) {
          _this.data = response.data.rows
          _this.total = response.data.total
          _this.currentSize = val
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleCurrentChange (val) {
      let _this = this
      service.findByParentId(this.currentParent, val, this.currentSize)
        .then(function (response) {
          console.log(response.data)
          _this.data = response.data.rows
          _this.total = response.data.total
          _this.currentPage = val
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .toolbar {
  background: #f2f2f2;
  padding: 10px;
  margin: 10px 0px;
  .el-form-item {
   margin-bottom: 10px
  }
  }
</style>
